<template>
    <div class="action">
        <hr>
        <h1>action的使用</h1>
        <button @click="clicknameAction">修改nameAction</button>
        <button @click="clickcounterAction">修改counterAction</button>
        <h2>action中的name:{{ $store.state.nameAction }}</h2>
        <h2>action中的counter:{{ $store.state.counterAction }}</h2>
        <mapAction></mapAction>
        <networkAction></networkAction>
    </div>
</template>
<script>
export default {
    methods: {
        clickcounterAction() {
            this.$store.dispatch("increateAction")
        },
        clicknameAction() {
            this.$store.dispatch("changenameAction", "小染like嘉然呀")
        }
    }
}
</script>
<script setup>
import mapAction from './mapAction.vue'
import networkAction from './networkAction.vue'
</script>
<style scoped lang="less"></style>